﻿// Defines a component that shows a field when activated and hides it otherwise
define([
'Wjs/widgets/Widget',
'Wjs/core/ValueChangedHandler',
'Wjs/widgets/field/TextField'
],
function (Widget, ValueChangedHandler) {
    'use strict';

    var type = 'FieldEditor',
    typeManager = Wjs.typeManager,
    FieldEditor = typeManager.getType(type);

    if (FieldEditor) {
        return FieldEditor;
    }

    FieldEditor = Wjs.typeBuilder.define({
        base: Widget,
        mixins: [
            ValueChangedHandler
        ],
        construct: function (conf, parent, owner) {

            var me = this;

            conf = conf || {};

            FieldEditor.base.constructor.call(this, conf, parent, owner);

            // The main element serves as a container for the display and the field
            me.addClass('w-field-editor');
            me.main.addEvents({
                click: function () {
                    me.activate();
                }
            });

            // Create the display to show when the field is hidden (not active)
            me.display = typeManager.create({
                text: conf.text || ''
            }, 'text', me.main);

            me.display.setAttributes({ 'class': 'w-field-editor-display' });

            me.fieldConf = conf; // Save the configuration of the field since we are using it to create the field during activation

            ValueChangedHandler.prototype.initialize.call(me, conf);
        },

        type: type,

        createMainElement: function (conf, parent) {
            this.main = this.createElement(conf, parent);
        },

        activate: function () {
            var me = this,
            conf = me.fieldConf;

            if (this.activated) { // Check to avoid re-entry
                return;
            }

            if (!me.field) {

                // Create the field
                me.field = me.createWidget(conf, conf.type || 'TextField');
                me.field.addClass('w-field-editor-field');

                me.field.blurHandler = function (evt) {
                    evt.preventDefault();

                    if (me.field.tool && me.field.tool.pressed) { // Do not deactivate if a tool button of a field has been pressed
                        me.field.tool.pressed = false; // It is not pressed anymore
                    }
                    else {
                        me.deactivate(true);
                    }
                };

                me.field.keyUpHandler = function (evt) {
                    switch (evt.keyCode) {
                        case 27: // Esc
                            {
                                evt.preventDefault();

                                me.deactivate(false, true);
                            }
                            break;
                        case 9: // Tab - No working
                            {
                                evt.preventDefault();

                                me.deactivate(true, true);
                            }
                            break;
                        case 13: // Enter
                            {
                                if (!me.multiline) {
                                    evt.preventDefault();

                                    me.deactivate(true, true);
                                }
                            }
                            break;
                    }
                };

                me.field.render(me.main.dom);
            }
            else { // Field exists
                me.field.setValue(me.display.getText());
                me.field.show();
            }

            me.field.setFocus();
            me.activated = true;
        },

        deactivate: function (commit, fireEvents) {
            var oldValue, newValue;

            if (!this.activated) { // Check to avoid re-entry
                return;
            }

            this.activated = false;

            this.field.hide();

            if (commit) {
                oldValue = this.display.getText();
                newValue = this.field.getValue();

                if (oldValue !== newValue) { // If value has changed
                    this.display.setText(newValue); // Set the new value

                    if (this.onValueChanged) { // Notify the change
                        this.onValueChanged.call(this, oldValue, newValue);
                    }
                }
            }
            else { // Restore the previous display since some browsers fire the blur event after that
                this.field.setValue(this.display.getText());
            }

            if (fireEvents && this.onDeactivate) {
                this.onDeactivate.call(this);
            }
        }

    });

    typeManager.registerType(FieldEditor);

    return FieldEditor;
});